<template>
	<view>
		<view class="recent-task card-info" v-if="!isVisit">
			<!-- <view class="recent-head flex " v-bind:style="{ backgroundImage:'linear-gradient(to right , #'+item.Color1 +', #'+item.Color2+', #'+item.Color3+')'  }"> -->
				<view class="recent-head flex " v-bind:style="{ borderTop:'10rpx solid #'+ item.Color1,'color':'#333','borderBottom':'1rpx solid #e5e5e5'}">
				<view class="recent-headL flex1 f-upDwon">
					<view class=" zcRelative" > <view class="zcOverflow3 absolut3">{{item.TracePurpose||''}}</view></view>
					<view class="flex">跟进时间：<view class="f-center top6upx">{{item.ForwardDate}}</view></view>
				</view>
				
				<view class="recent-headR flex1">
					<view class=" flex zcAlignI_center flex1">
						<view class="task-info-left task-info-left2" style="margin-left: 20upx;">跟进结果：</view>
						<picker style="width: 100%;"  @change="getPiker($event,'result',resultIndex,item)" :value="resultIndex" :range="resultArray">
							<view class="flex flex1 choose-result f-side" ><view class="flex1 zcOverflow3" style="max-width: 400upx;">{{item.rTraceResult||''}}</view><view class="iconfont icon-down-trangle"></view></view>
						</picker>
					</view>
					<view class="flex" style="margin-left: 20upx;">到期时间：<view class="f-center top6upx">{{item.ExpireDate}}</view></view>
				</view>
		
			</view>
		
					<!-- <view class="task-info flex zcAlignI_center" v-if="false">{{reasonArray[reasonIndex]}}</view> -->
					<view class="content-wrap" v-if="item.rTraceResult">
							<view class="flex select-reason">
								<view class="task-info flex zcAlignI_center flex1"><view class="task-info-left task-info-left2 task-info-left3">跟进原因：</view>
									<picker style="width: 100%;"  @change="getPiker($event,'reason',reasonIndex,item)" :value="reasonIndex" :range="reasonArray" range-key="Name">
										<view class="flex flex1 choose-result f-side"><view class="flex1 zcOverflow3" style="max-width: 400upx;" v-text="item.rTraceResultReasonName||''"></view><view class="iconfont icon-down-trangle"></view></view>
									</picker>
								</view>
						</view>
						<view class="task-info flex zcAlignI_center task-auto"><view class="task-info-left">跟进内容：</view><view class="flex1"><textarea  class="textarea" v-model="item.rContent" value=" " placeholder=" " @blur="getPiker('','textarea','0',item)" auto-height/></view></view>
							
						<view class="task-info flex zcAlignI_center" v-if="item.rTraceResult=='延期'"><view class="task-info-left" >下次跟进日期：</view>
							<picker style="width: 100%;" mode="date"  @change="getPiker($event,'nextDate','0',item)" :value="item.rnextTraceDate ">
								<view class="flex flex1 choose-result"><view class="f-center">{{item.rnextTraceDate}}</view><view class="iconfont icon-rili"></view></view>
							</picker>
						</view>
						
						<view class="task-info flex zcAlignI_center"><view class="task-info-left">修改项目到期：</view>
							<picker style="width: 100%;" mode="date"  @change="getPiker($event,'finishDate','0',item)" :value="item.rModifyExpireDate ">
								<view class="flex flex1 choose-result"><view class="f-center">{{item.rModifyExpireDate}}</view><view class="iconfont icon-rili"></view></view>
							</picker>
						</view>
					
				  </view>
				<!-- </view> -->
			</view>
			
			
			
			<view class="recent-task card-info" v-if="isVisit">
			<!-- <view class="recent-head flex " v-bind:style="{ backgroundImage:'linear-gradient(to right , #'+item.Color1 +', #'+item.Color2+', #'+item.Color3+')'  }"> -->
			<view class="recent-head flex " v-bind:style="{ borderTop:'10rpx solid #'+ item.Color1,'color':'#333','borderBottom':'1rpx solid #e5e5e5'}">
				<view class="recent-headL flex1 f-upDwon">
					<view class=" zcRelative" > <view class="zcOverflow3 absolut3">{{item.Remark||''}}</view></view>
					<view class="flex" >跟进时间：<view class="f-center" style="padding-top:5upx ;">{{item.F_TraceDate}}</view></view>
				</view>
				
				<view class="recent-headR flex1">
					<view class=" flex zcAlignI_center flex1" >
						<view class="task-info-left task-info-left2" style="margin-left: 20upx;">跟进结果：</view>
						<!-- <picker style="width: 100%;"  > -->
							<view class="flex flex1 choose-result f-side"><view class="flex1 zcOverflow3" style="max-width: 300upx;">{{item.F_TraceResult||''}}</view></view>
						<!-- </picker> -->
					</view>
					<view class="flex" style="margin-left: 20upx;">到期时间：<view class="f-center" style="padding-top:5upx ;">{{item.ExpireDate}}</view></view>
				</view>	
			</view>
			
					<!-- <view class="task-info flex zcAlignI_center" v-if="false">{{reasonArray[reasonIndex]}}</view> -->
					<view class="content-wrap" >
						<view class="task-info flex zcAlignI_center"><view class="task-info-left">车牌号：</view><view class="flex1">{{item.VehiclePlateNo}}</view></view>	
							<view class="flex select-reason ">
								<view class="task-info flex zcAlignI_center flex1"><view class="task-info-left task-info-left2 task-info-left3" >跟进原因：</view>
									<!-- <picker style="width: 100%;"  @change="getPiker($event,'reason',reasonIndex,item)" :value="reasonIndex" :range="reasonArray" range-key="Name"> -->
										<view class="flex flex1 choose-result f-side"><view class="flex1 zcOverflow3" style="max-width: 300upx;" v-text="item.F_TraceResultReasonName||''"></view></view>
									<!-- </picker> -->
								</view>
						  </view>

						<view class=" flex zcAlignI_center text-content task-auto"><view class="task-info-left">跟进内容：</view><view class="flex1" style="line-height: 40upx;padding: 10upx 0;">{{item.F_Content}}</view></view>	
						<view class="task-info flex zcAlignI_center" v-if="item.F_TraceResult=='延期'"><view class="task-info-left" >下次跟进日期：</view>
								<view class="flex flex1 choose-result"><view class="f-center">{{item.F_nextTraceDate}}</view></view>
						</view>
						<view v-if="item.F_ModifyExpireDate" class="task-info flex zcAlignI_center"><view class="task-info-left">修改项目到期：</view>
								<view class="flex flex1 choose-result"><view class="f-center">{{item.F_ModifyExpireDate}}</view></view>
						</view>
					
				  </view>
				<!-- </view> -->
			</view>
	</view>

</template>

<script>
	let _this ;
	export default{
		data(){
			return{
				resultIndex:-1,
				resultArray:["失败","延期",'暂不跟进'],
				reasonIndex:-1,
				nextDate:'',
				finishDate:''
			}
		},
		props:{
			item:Object,
			reasonArray:Array,
			showMore:Boolean,
			isVisit:{
				type:Boolean,
				default:false
			}
		},
		created(){
			_this = this ;
			this.nextDate=this.def_date();
			this.finishDate=this.def_date();
			
		},
		methods:{

			def_date(){
				let _date= new Date(),
						year =_date.getFullYear(),
						month = _date.getMonth() +1,
						day = _date.getDate();
				month = month > 9 ? month : '0' + month;;
				day = day > 9 ? day : '0' + day;
					
				return `${year}-${month}-${day}`;
			},
			do_showMore(item){
				// console.log(_this.index2)
       this.$emit('do_showMore',item)
			},
			getPiker(e,type,index,item){
				console.log(e)
				switch(type){
					case "result":			
					index = e.detail.value;
					if(index == "2"){
						item.rTraceResult = null
					}else{
						item.rTraceResult = this.resultArray[index]
					}
					break;
					case "reason" :
					index = e.detail.value;
					item.rTraceResultReasonName = this.reasonArray[index].Name
					item.rTraceResultReasonSN = this.reasonArray[index].SN
					break;
					case "finishDate":
					item.rModifyExpireDate = e.detail.value;
					break;
					case "nextDate":
					item.rnextTraceDate = e.detail.value;
					break;
					case "textarea":
					break;
				}
				this.$emit('do_changeItem',item)
			}
		}
	}
</script>

<style>
		.recent-task{
		background-color: #fff;
		/* padding: 10upx 20upx; */
		margin-bottom: 30upx;
	}
	.recent-task .task-info, .task-info2{
		height: 80upx;
		line-height: 80upx;
		border-bottom: 1upx solid #EFEFEF;
	}
/* 	.recent-task .task-info:first-child{
		border: none;
	} */
	.recent-task .task-info>view:first-child{
		flex: 0 0 220upx;
	}
	.choose-result>view:first-child{
		width: 40%;
	}
	.icon-rili{
		color: #50ACFC;
		font-size: 36upx;
	}
	.recent-task>view>view:last-child{
		height: auto !important;
		border-bottom: none;
	}
	.textarea{
		/* height: 100upx; */
		line-height: 40upx !important;
		padding: 15upx 0;
		width: 100%;
	}
	.task-more .icon-down-trangle:before{
		width: 30upx !important;
		margin-left: 10upx;
		
	}
	.icon-down-trangle{
		margin-right: 20upx;
	}
	/* 2019-11-28修改 */
	.recent-head{
		height: 110upx;
		padding: 0 20upx;
		color:#fff
	}
	.content-wrap{
		padding: 0 20upx 10upx 20upx;
	}
	.select-reason{
		/* padding: 0 20upx; */
		margin-top: 0upx;
/* 		height: 70upx;
		line-height: 70upx; */
	}
	.task-info-left2{
		flex:0 0 140upx !important;

	}
	.recent-headL,	.recent-headR{
		padding: 10upx 0;
	}
	.absolut3{
		position: absolute;
		width: 100%;
		top:0;bottom:0;
		height: 50upx;
	}
	.recent-headL>view{
		width: 100%;
	}
	.recent-headL>view,.recent-headR>view{
		height: 45upx;
	}
	.task-info-left3,.text-content>view:nth-of-type(1){
		flex:0 0 220upx!important
	}
	.top6upx{
		position: relative;
		top:3upx;
		
	}
	.text-content{
		min-height: 80upx;
		line-height: 40upx;
		border-bottom: 1upx solid #EFEFEF;
	}
	.task-auto{
		height: auto !important;
		min-height: 80upx !important;
		/* line-height: 60upx !important; */
	}
</style>
